<template>
  <div class="Home">
    <div class="content">
      <div class="page">
        <h1 class="title">Vue3.0 极速架构工具</h1>
        <span class="describe">CRAB，一套为开发者和设计师准备的基于 Vue3.0 架构方案</span>
        <div class="banner">
          <img src="../../assets/images/home.png" alt="" srcset="">
        </div>
        <ul class="introduce">
          <li>
            <div class="item">
              <div class="introduce-text">
                <div class="images">
                  <img src="../../assets/images/guide.0a8462c.png"/>
                </div>
                <h4>指南</h4>
                <span>了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。</span>
              </div>
              <router-link to="/guide">查看详情</router-link>
            </div>
          </li>
          <li>
            <div class="item">
              <div class="introduce-text">
                <div class="images">
                  <img src="../../assets/images/component.bd3411b.png"/>
                </div>
                <h4>组件</h4>
                <span>使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。</span>
              </div>
              <router-link to="/component">查看详情</router-link>
            </div>
          </li>
          <li>
            <div class="item">
              <div class="introduce-text">
                <div class="images">
                  <img src="../../assets/images/tools.svg"/>
                </div>
                <h4>工具库</h4>
                <span>适用于广泛的业务场景，提供对应的快捷操作，让开发者更加专注于业务。</span>
              </div>
              <router-link to="/tools">查看详情</router-link>
            </div>
          </li>
          <li>
            <div class="item">
              <div class="introduce-text">
                <div class="images">
                  <img src="../../assets/images/resource.a72b8f8.png"/>
                </div>
                <h4>资源</h4>
                <span>下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。</span>
              </div>
              <router-link to="/resource">查看详情</router-link>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({})
export default class Home extends Vue {}
</script>

<style lang="scss" scoped>
  .Home{
    height: 100%;
    position: relative;
    .content{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: auto;
      .page{
        width: 1200px;
        margin: auto;
        .title{
          padding: 30px 0;
          font-size: 26px;
          text-align: center;
          color: var(--text-primary-color);
        }
        .describe{
          padding: 0 0 30px;
          font-size: 16px;
          line-height: 1.58;
          display: block;
          text-align: center;
          color: var(--text-primary-color-8);
        }
        .banner{
          width: 80%;
          margin: auto;
          padding-bottom: 30px;
          img{
            width: 100%;
          }
        }
        .introduce{
          margin: 0 0 20px;
          li{
            float: left;
            width: 25%;
            list-style: none;
            box-sizing: border-box;
            margin: 15px 0;
            .item{
              margin: 0 15px;
              border: 1px solid var(--border-primary-color-3);
              border-radius: 4px;
              padding: 30px 0 0;
              .introduce-text{
                height: 220px;
                .images{
                  width: 60%;
                  margin: auto;
                  img{
                    width: 100%;
                    display: block;
                    margin: auto;
                  }
                }
                h4{
                  text-align: center;
                  margin-top: 15px;
                }
                span{
                  display: block;
                  padding: 0 20px;
                  font-size: 12px;
                  line-height: 1.58;
                  text-align: center;
                  margin-top: 15px;
                }
              }
              a{
                display: block;
                font-size: 14px;
                text-align: center;
                text-decoration: none;
                line-height: 1.58;
                padding: 10px 0;
                margin-top: 15px;
                border-top: 1px solid var(--border-primary-color-3);
                color: var(--primary-color)
              }
            }
          }
        }
        .introduce:after{
          content: '';
          display: block;
          clear: both;
        }
      }
    }
  }
  @media (max-width: 1200px) {
    .Home{
      .content{
        .page{
          width: auto !important;
          padding: 0 30px;
        }
      }
    }
  }
  @media (max-width: 1024px) {
    .Home{
      .content{
        .page{
          .introduce{
            li{
              width: 50%;
              .item{
                margin: 0 15px;
                .introduce-text{
                  .images{
                    width: 40% !important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  @media (max-width: 950px) {
    .Home{
      .content{
        .page{
          .introduce{
            li{
              .item{
                .introduce-text{
                  height: 200px;
                }
              }
            }
          }
        }
      }
    }
  }
  @media (max-width: 800px) {
    .Home{
      .content{
        .page{
          .introduce{
            li{
              .item{
                .introduce-text{
                  height: 180px;
                }
              }
            }
          }
        }
      }
    }
  }
  @media (max-width: 768px){
    .Home{
      .content{
        .page{
          .introduce{
            li{
              width: 100%;
              .item{
                margin: 0 30px;
                .introduce-text{
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
</style>